Buttons and toggles

Buttons

A standard button needs labelling if the text on the button is not informative enough. For example, a button that says ‘GO’ might not give the user enough information to know what that action will do. It is important that we do not rely on colour alone to show the state of the button.

---

Toggles

Toggles are used to switch between 2 states. A toggle must have a clear label indicating its function, using Aria-label or labelled by if needed and, like a checkbox, users must be warned if switching a toggle will result in a change of content

Toggles can be created in 2 ways. Replicating the function/code of a checkbox (type=checkbox) and using ‘checked’ and ‘unchecked’ to show the different states of the toggle Using the function of a switch (type=button) and using ‘pressed=true’ and ‘pressed=false’ to show different states of the toggle

Personally I would prefer to use the checked/unchecked state in order to avoid polluting the dom with extra buttons